.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;

  /* 背景装饰 */
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
  }

  /* 头部区域 */
  .login-header {
    position: relative;
    z-index: 1;
    padding: 120rpx 60rpx 80rpx;
    text-align: center;
    
    .login-logo {
      .logo-icon {
        font-size: 120rpx;
        margin-bottom: 30rpx;
        display: block;
        animation: bounce 2s ease-in-out infinite;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
      }
      
      .logo-text {
        font-size: 56rpx;
        font-weight: bold;
        color: white;
        margin-bottom: 16rpx;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        letter-spacing: 4rpx;
      }
      
      .logo-subtitle {
        font-size: 28rpx;
        color: rgba(255,255,255,0.8);
        text-shadow: 0 1px 4px rgba(0,0,0,0.2);
      }
    }
  }

  /* 登录表单 */
  .login-form {
    position: relative;
    z-index: 1;
    margin: 0 30rpx;
    
    .form-card {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20rpx);
      border-radius: 32rpx;
      padding: 60rpx 40rpx;
      box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.2);
      border: 1px solid rgba(255,255,255,0.3);
      
      .form-title {
        text-align: center;
        margin-bottom: 50rpx;
        
        .title-text {
          font-size: 40rpx;
          font-weight: bold;
          color: #323233;
          margin-bottom: 16rpx;
        }
        
        .title-subtitle {
          font-size: 28rpx;
          color: #969799;
        }
      }
      
      .form-item {
        margin-bottom: 40rpx;
        
        input {
          width: 100%;
          height: 100rpx;
          background: rgba(247,248,250,0.8);
          border: 2rpx solid transparent;
          border-radius: 24rpx;
          padding: 0 30rpx;
          font-size: 32rpx;
          color: #323233;
          transition: all 0.3s ease;
          
          &:focus {
            background: white;
            border-color: #1989fa;
            box-shadow: 0 0 0 8rpx rgba(25,137,250,0.1);
          }
          
          &::placeholder {
            color: #969799;
          }
        }
        
        &.code-item {
          display: flex;
          gap: 20rpx;
          
          .code-input {
            flex: 1;
          }
          
          .code-btn {
            width: 200rpx;
            height: 100rpx;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 24rpx;
            font-size: 28rpx;
            font-weight: 500;
            transition: all 0.3s ease;
            
            &:disabled {
              background: #c8c9cc;
              color: #969799;
            }
            
            &:not(:disabled):active {
              transform: scale(0.95);
            }
          }
        }
      }
      
      .login-btn {
        width: 100%;
        height: 100rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 32rpx;
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 20rpx;
        box-shadow: 0 8rpx 32rpx rgba(102,126,234,0.4);
        transition: all 0.3s ease;
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 4rpx 16rpx rgba(102,126,234,0.4);
        }
        
        &.loading {
          opacity: 0.8;
        }
      }
      
      .login-tips {
        text-align: center;
        margin-top: 40rpx;
        
        .tips-text {
          font-size: 24rpx;
          color: #969799;
          line-height: 1.5;
        }
      }
    }
  }

  /* 测试账户区域 */
  .test-accounts {
    position: relative;
    z-index: 1;
    margin: 40rpx 30rpx 60rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 30rpx;
      text-align: center;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      
      &::before,
      &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255,255,255,0.3);
      }
    }
    
    .account-item {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(10rpx);
      border-radius: 24rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
      border: 1px solid rgba(255,255,255,0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(-4rpx);
        box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
        background: white;
      }
      
      .account-info {
        .account-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #323233;
          margin-bottom: 8rpx;
        }
        
        .account-phone {
          font-size: 28rpx;
          color: #969799;
        }
      }
      
      .member-badge {
        padding: 12rpx 24rpx;
        border-radius: 24rpx;
        font-size: 24rpx;
        font-weight: 500;
        
        &.gold {
          background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
          color: white;
        }
        
        &.diamond {
          background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          color: #333;
        }
        
        &.normal {
          background: #f2f3f5;
          color: #646566;
        }
      }
    }
    
    .test-tips {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10rpx);
      border-radius: 24rpx;
      padding: 30rpx;
      margin-top: 30rpx;
      border: 1px solid rgba(255,255,255,0.2);
      
      .tips-content {
        display: flex;
        align-items: flex-start;
        gap: 20rpx;
        
        .tips-icon {
          font-size: 32rpx;
          margin-top: 4rpx;
        }
        
        text {
          flex: 1;
          font-size: 26rpx;
          color: rgba(255,255,255,0.9);
          line-height: 1.5;
        }
      }
    }
  }
}

/* 动画效果 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20rpx);
  }
  60% {
    transform: translateY(-10rpx);
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .login-page {
    .login-form .form-card {
      padding: 40rpx 30rpx;
    }
    
    .test-accounts {
      margin: 30rpx 20rpx 40rpx;
    }
  }
}